﻿@layout HomeLayout
@inherits JSModuleComponentBase
@page "/"
@page "/index"
@page "/home"

<section class="home-section">
    <div class="welcome container">
        <div class="row g-3">
            <div class="col-12 col-lg-6 position-relative">
                <div class="welcome-header">
                    <h4>
                        @Localizer["HeaderTitle"]
                    </h4>
                    <div>@((MarkupString)Localizer["HeaderDesc", Options.CurrentValue.TotalCount].Value)</div>
                    <div class="@BodyClassString">
                        @Localizer["HeaderBody"]
                        <span id="@Id" class="typed"></span>
                        <span class="typed-cursor">|</span>
                        <div>@Localizer["HeaderBody1"]</div>
                    </div>
                </div>
                <Wwads />
                <div class="welcome-footer">
                    <div class="d-flex flex-wrap">
                        <span role="alert" class="tag alert fade show alert-primary" data-bs-toggle="tooltip" title="Tree @Localizer["TagTitle"]">
                            @Localizer["Span1"]
                        </span>
                        <span role="alert" class="tag alert fade show alert-success" data-bs-toggle="tooltip" title="Menu @Localizer["TagTitle"]">
                            @Localizer["Span2"]
                        </span>
                        <span role="alert" class="tag alert fade show alert-warning" data-bs-toggle="tooltip" title="Tab Tag Alert @Localizer["TagTitle"]">
                            @Localizer["Span3"]
                        </span>
                        <span role="alert" class="tag alert fade show alert-secondary" data-bs-toggle="tooltip" title="Table @Localizer["TagTitle"]">
                            @Localizer["Span4"]
                        </span>
                    </div>
                    <div class="d-flex flex-wrap">
                        <span role="alert" class="tag alert fade show alert-danger" data-bs-toggle="tooltip" title="Layout Split @Localizer["TagTitle"]">
                            @Localizer["Span5"]
                        </span>
                        <span role="alert" class="tag alert fade show alert-info" data-bs-toggle="tooltip" title="Dialog Message Toast @Localizer["TagTitle"]">
                            @Localizer["Span6"]
                        </span>
                        <span role="alert" class="tag alert fade show alert-dark" data-bs-toggle="tooltip" title="Upload @Localizer["TagTitle"]">
                            @Localizer["Span7"]
                        </span>
                        <span role="alert" class="tag alert fade show alert-success" data-bs-toggle="tooltip" title="Swith Toogle @Localizer["TagTitle"]">
                            @Localizer["Span8"]
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <Carousel>
                    <CarouselItem>
                        <CaptionTemplate>
                            <h5>@Localizer["CarouselH1"]</h5>
                            <p>@Localizer["CarouselP1"]</p>
                        </CaptionTemplate>
                        <ChildContent>
                            <img alt="bar" src="_content/BootstrapBlazor.Shared/images/bar.gif" />
                        </ChildContent>
                    </CarouselItem>
                    <CarouselItem>
                        <CaptionTemplate>
                            <h5>@Localizer["CarouselH2"]</h5>
                            <p>@Localizer["CarouselP2"]</p>
                        </CaptionTemplate>
                        <ChildContent>
                            <img alt="dought" src="_content/BootstrapBlazor.Shared/images/dought.gif" />
                        </ChildContent>
                    </CarouselItem>
                    <CarouselItem>
                        <CaptionTemplate>
                            <h5>@Localizer["CarouselH3"]</h5>
                            <p>@Localizer["CarouselP3"]</p>
                        </CaptionTemplate>
                        <ChildContent>
                            <img alt="table" src="_content/BootstrapBlazor.Shared/images/table.png" />
                        </ChildContent>
                    </CarouselItem>
                    <CarouselItem>
                        <CaptionTemplate>
                            <h5>@Localizer["CarouselH4"]</h5>
                            <p>@Localizer["CarouselP4"]</p>
                        </CaptionTemplate>
                        <ChildContent>
                            <img alt="timeline" src="_content/BootstrapBlazor.Shared/images/timeline.png" />
                        </ChildContent>
                    </CarouselItem>
                </Carousel>
            </div>
        </div>
    </div>
    <div class="intro container">
        <div class="row g-3">
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card border-success">
                    <p class="d-none d-sm-block">
                        <img src="_content/BootstrapBlazor.Shared/images/components.svg" alt="components" />
                    </p>
                    <h3>@Localizer["ContainerH1"]</h3>
                    <div>@((MarkupString)Localizer["ContainerD1", Options.CurrentValue.TotalCount].Value)</div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card border-primary">
                    <p class="d-none d-sm-block">
                        <img src="_content/BootstrapBlazor.Shared/images/performance.svg" alt="performance" />
                    </p>
                    <h3>@Localizer["ContainerH2"]</h3>
                    <div>@Localizer["ContainerD2"]</div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card border-info">
                    <p class="d-none d-sm-block">
                        <img src="_content/BootstrapBlazor.Shared/images/ease-of-use.svg" alt="ease-of-use" />
                    </p>
                    <h3>@Localizer["ContainerH3"]</h3>
                    <div>@Localizer["ContainerD3"]</div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card border-danger">
                    <p class="d-none d-sm-block">
                        <img src="_content/BootstrapBlazor.Shared/images/hassel-free-licensing.svg" alt="licensing" />
                    </p>
                    <h3>@Localizer["ContainerH4"]</h3>
                    <div>@Localizer["ContainerD4"]</div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card border-warning">
                    <p class="d-none d-sm-block">
                        <img src="_content/BootstrapBlazor.Shared/images/demo-and-training.svg" alt="training" />
                    </p>
                    <h3>@Localizer["ContainerH5"]</h3>
                    <div>@Localizer["ContainerD5"]</div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="card border-secondary">
                    <p class="d-none d-sm-block">
                        <img src="_content/BootstrapBlazor.Shared/images/frequent-updates.svg" alt="updates" />
                    </p>
                    <h3>@Localizer["ContainerH6"]</h3>
                    <div>@Localizer["ContainerD6"]</div>
                </div>
            </div>
        </div>
    </div>
    <div class="donate">
        <h3>@Localizer["DonateH1"]</h3>
        <h5 class="d-none d-sm-block mb-3">@Localizer["DonateH2"]</h5>
        <img alt="barcode" class="barcode" src="_content/BootstrapBlazor.Shared/images/BarCode@2x.png" />
    </div>
</section>
